import { Button, Col, Row } from 'antd';
import * as Icons from '@ant-design/icons';
import React, { useContext, useEffect } from 'react';
import { ISupplierActionEnum, SupplierLocaldataContext } from '../common';
import { onMouseOutBtn } from '@/utils';
const customIcons: { [key: string]: any } = Icons;
const addIcon = (name: string) => React.createElement(customIcons[name]);

const spanStyle = {
  fontWeight: 600,
  fontSize: 18,
  margin: '0px 10px',
};
export const UpdateRightContastsTop: React.FC<SupplierManageAPI.IUpdateRightContastsTop> = ({
  contactsCurrentIndex,
  contactsCurrentChange,
}) => {
  /** 获取上下文 */
  const { contactsSwitchList, supplierDispath, supplierInfoObj } = useContext(SupplierLocaldataContext);

  /** 按钮渲染 */
  const btnRender = (disabled: boolean, step: string, icon: string) => {
    return (
      <Button
        type={'link'}
        icon={addIcon(icon)}
        className='manageBtntTxtStyle'
        onMouseOut={onMouseOutBtn}
        onClick={() => {
          contactsCurrentChange(step);
        }}
        disabled={disabled}
      />
    );
  };

  useEffect(() => {
    if (contactsSwitchList?.length > 0 && contactsSwitchList?.length != supplierInfoObj?.msupplierContacters?.length) {
      supplierDispath({
        type: ISupplierActionEnum.CONTACTS_CURRENT,
        payload: contactsSwitchList?.length - 1,
      });
    }
  }, [contactsSwitchList?.length, supplierInfoObj?.msupplierContacters?.length]);

  return (
    <>
      <Row style={{ padding: '5px 10px 0px' }}>
        <Col span={2} style={{ justifyContent: 'flex-start' }}>
          {btnRender(contactsCurrentIndex == 0 || !contactsSwitchList?.length, 'prev', 'DoubleLeftOutlined')}
        </Col>
        <Col span={20} style={{ textAlign: 'center' }}>
          共<span style={spanStyle}>{contactsSwitchList?.length || 0}</span>
          个，当前第
          <span style={spanStyle}>{contactsSwitchList?.length == 0 ? 0 : contactsCurrentIndex + 1}</span>个
        </Col>
        <Col span={2} style={{ justifyContent: 'flex-end' }}>
          {btnRender(
            contactsCurrentIndex == contactsSwitchList?.length - 1 || !contactsSwitchList?.length,
            'next',
            'DoubleRightOutlined',
          )}
        </Col>
      </Row>
    </>
  );
};
